<template>
    <div class="login-container">
        <a-row>
            <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
                <div class="login-container-form">
                    <div class="login-container-hello">hello!</div>
                    <div class="login-container-title">
                        欢迎来到reader管理系统
                    </div>
                    <a-form :model="form" @submit="handleSubmit" @submit.prevent>
                        <a-form-item>
                            <a-input v-model:value="form.username" placeholder="Username">
                                <template v-slot:prefix>
                                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input v-model:value="form.password" type="password" placeholder="Password">
                                <template v-slot:prefix>
                                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" html-type="submit">
                                登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-col>
        </a-row>
        <div class="login-container-tips"></div>
    </div>
</template>
<script>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { login } from "@/api/index";
import { message } from "ant-design-vue";
import { onBeforeRouteUpdate } from "vue-router";

export default {
    name: "Login",
    components: {
        UserOutlined,
        LockOutlined,
    },
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
        };
    },

    mounted() {
    },
    beforeRouteEnter(to, from, next) {
        console.log("beforeRouteEnter");
        if (localStorage.getItem("user")) {
            next((vm) => {
                vm.$router.push("/userList");
            });
        } else {
            next();
        }
    },
    methods: {
        async handleSubmit() {
            login({
                nickName: this.form.username,
                password: this.form.password,
            }).then((res) => {
                if (res.data.code == 200) {
                    console.log(res.data);
                    if (res.data.data.role === "2") {
                        localStorage.setItem(
                            "user",
                            JSON.stringify(res.data.data)
                        );
                        this.$router.push("/userList");
                    } else {
                        message.warning("您没有管理员权限！");
                    }
                } else {
                    message.error(res.data.msg || "登录失败");
                }
            });
            // await this.$router.push('/userList');
        },
    },
};
</script>
<style lang="less">
.login-container {
    width: 100%;
    height: 100vh;
    background: url("~@/assets/login_images/login_background.png");
    background-size: cover;
    .login-container-form {
        width: calc(100% - 40px);
        height: 380px;
        padding: 4vh;
        margin-top: calc((100vh - 380px) / 2);
        margin-right: 20px;
        margin-left: 20px;
        background: url("~@/assets/login_images/login_form.png");
        background-size: 100% 100%;
        border-radius: 10px;
        box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    }
    .login-container-hello {
        font-size: 32px;
        color: #fff;
    }
    .login-container-title {
        margin-bottom: 30px;
        font-size: 20px;
        color: #fff;
    }
    .login-container-tips {
        position: fixed;
        width: 100%;
        height: 40px;
        color: rgba(255, 255, 255, 0.856);
        text-align: center;
    }
    .ant-col {
        width: 100%;
        padding: 0 10px 0 10px;
    }
    .ant-input {
        height: 35px;
    }
    .ant-btn {
        width: 100%;
        height: 45px;
        border-radius: 99px;
    }
}
</style>
